import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../../store'
import { useEffect, useState } from 'react'
import title from '@/resource/middle/png_title.png'
import btn_hover from '@/resource/middle/btn_hover.png'
import btn from '@/resource/middle/btn.png'
import bg_jianbian from '@/resource/middle/bg_jianbian.png'
import HoverImage from '@/pages/auctionmanage/components/HoverImg'
import { getLocalStorage } from '@/storage'
import useFullScreen from '@/hooks/useFullScreen'
import dayjs from 'dayjs'

let interval: any
export default observer(({ query }: any) => {
    const store = useLocalObservable(() => Store)
    const [height, setHeight] = useState(document.body.clientHeight)
    const { isFullScreen } = useFullScreen()
    const [id, setId] = useState(null)
    const { createTrainings } = store
    const cb_url = getLocalStorage('CALLBACK_URL')

    const resize = () => {
        setHeight(document.body.clientHeight > 900 ? document.body.clientHeight : 900)
    }

    useEffect(() => {
        setTimeout(() => {
            resize()
        }, 120)
    }, [isFullScreen])

    useEffect(() => {
        createTrainings(query).then(res => {
            setId(res.data.id)
        })
        // .then(res => {
        // setTime(3599 - (dayjs().valueOf() - dayjs(res.data.create_time).valueOf()) / 1000)
        // interval = setInterval(() => {
        //     setTime(v => {
        //         if (v < 1) {
        //             clearInterval(interval)
        //             return 0
        //         }
        //         return v - 1
        //     })
        // }, 1000)
        // })
        window.onresize = resize
        return () => {
            // window.onresize = null
            clearInterval(interval)
        }
    }, [])

    return (
        <div className={styles.container}>
            <div className={styles.content} style={{ transform: `scale(${height / 1080})` }}>
                <img className={styles.title} width={168} style={{ marginBottom: `${height * 0.08}px` }} src={title} />
                <div className={styles.tips} style={{ marginBottom: `${height * 0.301}px` }}>
                    请学生打开求职实训小程序，进入到模拟面试间，选择自己想要模拟面试的职位进入到面试中；全程请注意保持良好的仪表和行为举止。
                </div>
                {/* <div className={styles.circle_outline} style={{ marginBottom: `${height * 0.0963}px`, opacity: '0' }}>
                    <div className={styles.circle_inline}>
                        <div className={styles.time}>{dayjs(time * 1000).format('mm:ss')}</div>
                    </div>
                </div> */}
                <div className={styles.btn_wrapper} style={{ marginBottom: `${height * 0.19}px` }}>
                    <HoverImage
                        className={styles.btn}
                        placeholderSrc={btn}
                        src={btn_hover}
                        onClick={() => {
                            if (cb_url) {
                                window.location.href = `${cb_url}&id=${id}`
                            }
                        }}
                    >
                        查看面试结果
                    </HoverImage>
                </div>
            </div>
        </div>
    )
})
